<template>
	<view>
		<view class="topTab" v-if="formData.review1Log || formData.review2Log">
			<view class="detailTab" :class="tabIndex === 'detail' ? 'active' : ''" @click="tabIndex = 'detail'">任务</view>
			<view class="review1Tab" v-if="formData.review1Log && formData.review1Log.id" :class="tabIndex === 'review1' ? 'active' : ''" @click="tabIndex = 'review1'">初审</view>
			<view class="review2Tab" v-if="formData.review2Log &&formData.review2Log.id" :class="tabIndex === 'review2' ? 'active' : ''" @click="tabIndex = 'review2'">复审</view>
		</view>
		<view class="detailContent" v-show="tabIndex == 'detail'">
			<uni-card>
				<uni-section title="任务基本信息" type="line">
					<uni-forms ref="form" :modelValue="formData" label-width="100px">
						<uni-forms-item label="任务名称:" required name="name">
							<view>{{ formData.name }}</view>
						</uni-forms-item>
						<uni-forms-item label="房间:" required name="roomId">
							<view>{{ formData.room.roomName }}</view>
						</uni-forms-item>
						<uni-forms-item label="检查类型:" required name="type">
							<view>{{ findText(formData.type, range) }}</view>
						</uni-forms-item>
						<uni-forms-item v-if="formData.type ==0" label="课程:" required name="courseId">
							<view>{{ findText(formData.courseId, courseList) }}</view>
						</uni-forms-item>
						<uni-forms-item label="执行人员:" required name="executorId">
							<view>{{ findText(formData.executorId, workers) }}</view>
						</uni-forms-item>
						<uni-forms-item label="初审人员:" required name="reviewer1">
							<view>{{ findText(formData.reviewer1, workers) }}</view>
						</uni-forms-item>
						<uni-forms-item label="复审人员:" required name="reviewer2">
							<view>{{ findText(formData.reviewer2, workers) }}</view>
						</uni-forms-item>
						<uni-forms-item label="备注:">
							<view>{{ formData.notes }}</view>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</uni-card>
			<uni-card>
				<uni-section title="检查项目" type="line">
					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
						<uni-tr>
							<uni-th width="150" align="center">检查内容</uni-th>
							<uni-th width="205" align="center">检查结果</uni-th>
							<uni-th width="204" align="center">图片</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in formData.recordList" :key="index">
							<uni-td align="center">{{ item.content }}</uni-td>	
							<uni-td align="center">
								<view v-if="item.status">
									合格<uni-icons type="checkmarkempty" size="20" color="#b5e271"></uni-icons>
								</view>
								<view v-else>
									不合格<uni-icons type="closeempty" size="20" color="#f56c6c"></uni-icons>
								</view>
							</uni-td>
							<uni-td align="center">
								<!-- <view>
									{{item.fileList[0]}}
								</view> -->
								<view v-if="item.fileList.length"
									style="display: flex;flex-direction: row;align-items: center;">
									<view @click="openPic(item.fileList[0].url)" style="width: 100%;height: 40px;">
										<image mode="aspectFit" :src="item.fileList[0].url" style="width: 100%;height: 40px;"></image>
									</view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</uni-section>
			</uni-card>
		</view>	
		<view class="review1Content" v-if="formData.review1Log &&formData.review1Log.id" v-show="tabIndex == 'review1'">
			<uni-card>
				<uni-section title="初审内容" type="line">
					<uni-forms ref="review" :modelValue="formData.review1Log" label-width="100px">
						<uni-forms-item label="审核结果" required name="status">
							<view>{{ findText(formData.review1Log.status, statusRange) }}</view>
						</uni-forms-item>
						<uni-forms-item label="初审意见">
							<view>{{ formData.review1Log.opinion }}</view>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</uni-card>
		</view>
		<view class="review2Content" v-if="formData.review2Log &&formData.review2Log.id" v-show="tabIndex == 'review2'">
			<uni-card>
				<uni-section title="复审内容" type="line">
					<uni-forms ref="review2" :modelValue="formData.review2Log" label-width="100px">
						<uni-forms-item label="审核结果" required name="status">
							<view>{{ findText(formData.review2Log.status, statusRange) }}</view>
						</uni-forms-item>
						<uni-forms-item label="初审意见">
							<view>{{ formData.review2Log.opinion }}</view>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</uni-card>
		</view>
		
		<uni-popup ref="IMAGE" v-show="picUrl">
			<view>
				<image :src="picUrl"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { listRoomAll } from '@/common/api/device'
	import { listItemAll, getById } from '@/common/api/scene'
	import { workersAll, upload } from '@/common/api/user'
	import { listCourseAll } from '@/common/api/course.js'
	export default {
		data() {
			return {
				// 表单参数
				formData: {
					name: '',
					roomId: null,
					type: 0,
					courseId: null,
					executorId: '',
					reviewer1: '',
					reviewer2: ''
				},
				range: [{"value": 0,"text": "按课程"	},{"value": 1,"text": "按周"}],
				rangeResult: [{"value": -1,"text": "合格"	},{"value": 1,"text": "不合格"}],
				loading: false,
				tableData: [],
				workers: [],
				courseList: [],
				picUrl: '',
				tabIndex: 'detail',
				statusRange: [{"value": 1,"text": "通过"	},{"value": 0,"text": "不通过"}],
			}
		},
		components: {
		},
		onLoad(option) {
			 getById(option.id).then(res => {
				console.log(res, 'response')
				this.formData = res.data
			 })
			listCourseAll().then(res => {
				console.log(res, 'device...')
				this.courseList = res.data.map(item => ({
					value: item.courseId, 
					text: item.courseName
				}));
			})
			workersAll().then(res => {
				console.log(res, 'workers...')
				this.workers = res.data.map(item => ({
					value: item.staffId, 
					text: item.staffName
				}));
			})
		},
		methods: {
			// 获取该设备点检项目
			getList(id) {
				console.log(id)
				listItemAll(id).then(res => {
					console.log(res, 'items')
					this.tableData = res.data.rows
				})
			},
			findText(id, list) {
				if(id === true) id =1
				if(id === false) id =1
				const theItem = list.find(item => item.value === id);
				return theItem ? theItem.text : '未知';
			},
			openPic(picUrl) {
				this.picUrl = picUrl
				this.$refs.IMAGE.open()
			},
			
		}
	}
</script>

<style lang="less">
	.uni-forms-item view {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.topTab {
		margin: 15px;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
		display: flex;
		view {
			width: 100%;
			text-align: center;
			height: 5vh;
			line-height: 5vh;
		}
		view.active {
			background-color: #007AFF;
			color: #fff;
		}
	}
</style>